<template>
    <div class="setting-invitation-page">
        <el-card shadow="never" v-loading="loading">
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
                label-position="right"
                label-suffix=":"
                label-width="100px">
                <el-form-item label="奖励天数" prop="content">
                    <el-input-number
                        v-model="form.content"
                        :min="0"
                        class="input-width"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onClickConfirm()">保 存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {
                key: 'invite_reward_day_length',
                content: '',
            },
            rules: {
                content: [
                    { required: true, message: '奖励天数不能为空', trigger: 'blur' },
                ],
            },
            isMeet: false,
            loading: false,
        };
    },
    methods: {
        onClickConfirm() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                const url = this.isMeet ? `setting/${this.form.id}` : 'setting';
                const params = {
                    key: this.form.key,
                    content: this.form.content,
                };
                this.loading = true;
                API[this.isMeet ? 'put' : 'post'](url, params).then(() => {
                    $ele.$message.success(this.isMeet ? '修改成功' : '保存成功');
                }).finally(() => {
                    setTimeout(() => { this.loading = false; }, 500);
                });
            });
        },
        fetchData() {
            this.loading = true;
            API.get('setting/invite_reward_day_length').then(res => {
                if (res) {
                    this.isMeet = true;
                    this.form = res;
                }
            }).finally(() => {
                setTimeout(() => { this.loading = false; }, 500);
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scpoed>
.setting-invitation-page {
    .input-width {
        max-width: 340px;
    }
}
</style>
